﻿<script setup>
    import { ref } from 'vue';

   /* const isActive = ref(true);
    const hasError = ref(true);*/

  /*  const classObject = reactive({
        isActive: true,
        'text-danger':false
    })*/

   /* 绑定数组*/
   /* const activeClass = ref('active');
    const errorClass = ref('text-danger');*/

    /*const activeColor = ref('red');
    const fontSize = ref(30);*/


    const styleObject = reactive({
        color: 'red',
        fontSize: '30px'
    });
</script>

<template>

    <!--<div class="static"
         :class="{active:isActive, 'text-danger':hasError}"></div>-->
    <!--v-bind绑定一个对象-->
    <!-- <div class="static"
          :class="classObject"></div>-->
    <!--绑定数组-->
    <!--<div :class="[activeClass, errorClass]"></div>-->
    <!--<div :class="[isActive ? activeClass : '', errorClass]"></div>-->
    <!--<div :class="[{[activeClass] : isActive}, errorClass] "></div>-->

   <!-- <div :style="{color: activeColor, fontSize: fontSize + 'px'}"></div>-->

    <div :style="styleObject"></div>

</template>